<template>
    <div>
        {{ fanc }}
        <table class="table table-bordered">

            <thead>
                <tr>
                    <td>用户名</td>
                    <td><input type="text" v-model="fanc.name" ></td>
                </tr>

                <tr>
                    <td>密码</td>
                    <td><input type="password" v-model="fanc.pwd" ></td>
                </tr>

                <tr>
                    <td>确认密码</td>
                    <td><input type="password" v-model="fanc.upwd" ></td>
                </tr>

                <tr>
                    <td>请选择城市</td>
                    <td><select v-model="fanc.city" >
                        <option value="0">请选择</option>
                        <option :value="o.id" v-for="o in citys" >{{ o.name }}</option>
                    </select></td>
                </tr>

                <tr>
                    <td>请选择性别</td>
                    <td><input type="radio" v-model="fanc.sxe" value="1" >男
                        <input type="radio" v-model="fanc.sxe" value="0" >女</td>
                </tr>

                <tr>
                    <td>请选择职业</td>
                    <td><input type="radio" v-model="fanc.wei" value="学生" > 学生
                        <input type="radio" v-model="fanc.wei" value="教师" > 教师
                        <input type="radio" v-model="fanc.wei" value="其他" >其他
                    </td>
                </tr>

                <tr>
                    <td>请选择爱好</td>
                    <td><input type="checkbox" v-model="fanc.ai" value="打篮球" >打篮球
                        <input type="checkbox" v-model="fanc.ai" value="跑步" >跑步
                        <input type="checkbox" v-model="fanc.ai" value="阅读" >阅读
                        <input type="checkbox" v-model="fanc.ai" value="上网" >上网
                    </td>
                </tr>

                <tr>
                    <td>备注</td>
                    <td><textarea v-model="fanc.bei" ></textarea></td>
                </tr>

                <tr>
                    <td>是否同意条款</td>
                    <td><input type="checkbox" v-model="fanc.ho" ></td>
                </tr>

                <tr>
                    <td></td>
                    <td><input type="button" value="提交" >
                        <input type="button" value="重置" ></td>
                </tr>
            </thead>
        </table>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

let fanc:any=ref({
    name:'',
    pwd:'',
    upwd:'',
    city:'0',
    sxe:'',
    wei:'',
    ai:[],
    bei:'',
    ho:''
})


let citys:any = ref([
  {id:1,name:'北京'},
  {id:2,name:'天津'},
  {id:3,name:'上海'},
  {id:4,name:'河北'},
  {id:5,name:'山西'},
  {id:6,name:'山东'},
])


</script>

<style scoped>

</style>